<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :mask-closable="false"
    :destroy-on-close="true"
    :z-index="1000"
    @close="onClose"
  >
    <TaskTitle
      icon-name="Det"
      title-name="潜客详情-部门主管审批-待办"
      color="green"
    />
    <div v-if="getFormData && formData.code" class="list-container">
      <div class="progress-container">
        <TitleSecondary title="审批流程图" />
        <ProgressStaus />
      </div>
      <ProgressClue :data="formData.nodeFlowCharts" />
      <TitleSecondary title="基本信息" />
      <CustomerDetail :detail="formData" />
      <TitleSecondary title="关联信息" />
      <div class="info-box">
        <p-tabs
          :animated="false"
          class="tabs-container"
          default-active-key="1"
          @change="tabsChange"
        >
          <p-tab-pane key="1" tab="业务线">
            <TableBusinessLine
              ref="businessLines"
              :code="formData.code"
              :show-btn="false"
            />
          </p-tab-pane>
          <p-tab-pane key="2" tab="联系人">
            <TabsContacts
              :code="formData.code"
              :name="formData.name"
              :show-btn="false"
              :show-detail="true"
              :show-create="false"
            />
          </p-tab-pane>
          <p-tab-pane key="3" tab="决策关系">
            <!-- <TabsContacts :code="formData.code" :name="formData.name" /> -->
            <TreeGraph :code="formData.code" />
          </p-tab-pane>
          <p-tab-pane key="4" tab="地址">
            <TabsAddress
              :code="formData.code"
              :show-btn="false"
              :show-detail="true"
            />
          </p-tab-pane>
          <!-- <p-tab-pane key="5" tab="法人">
            <TabsLegalPerson :code="formData.code" :show-btn="false" />
          </p-tab-pane> -->
          <p-tab-pane key="6" tab="附件">
            <TabsEnclosure :code="formData.code" :show-btn="false" />
          </p-tab-pane>
        </p-tabs>
      </div>
      <ApprovalInformation v-if="formData.isCurrentProcessor" ref="approval" />
      <!-- <TitleSecondary title="操作日志" /> -->
      <ProgressLog :list="formData.logs" />
      <BottomLine />
    </div>
    <ButtonGroup
      class="footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
    <DialogTransferAdimin
      :visible.sync="visibleTransfer"
      :plan-id="formData.id"
      :current-user-id="formData.handleUserId"
      :current-user-name="formData.handleUserName"
      @change="onClose"
    />
  </p-drawer>
</template>

<script>
import {
  getQueryDetail,
  postRecallInfo,
  postCustomerCreateApprove,
} from '@/api/customerApi.js';
import ProgressStaus from '@/components/task/ProgressStaus.vue';
import CustomerDetail from './CustomerDetail.vue';
import TableBusinessLine from '@/components/task/TableBusinessLine.vue';
import TabsEnclosure from './TabsEnclosure.vue';
import TabsAddress from './TabsAddress.vue';
// import TabsLegalPerson from './TabsLegalPerson.vue';
import TabsContacts from './TabsContacts.vue';
import ProgressClue from '@/components/task/ProgressClue.vue';
import ProgressLog from '@/components/task/ProgressLog.vue';
import ApprovalInformation from '@/components/task/ApprovalInformation.vue';

import DialogTransferAdimin from './DialogTransferAdimin.vue';

import DrawerMixin from './mixin';
export default {
  components: {
    ProgressStaus,
    CustomerDetail,
    TableBusinessLine,
    TabsEnclosure,
    TabsAddress,
    // TabsLegalPerson,
    TabsContacts,
    ProgressClue,
    ProgressLog,
    ApprovalInformation,
    DialogTransferAdimin,
  },
  mixins: [DrawerMixin],
  props: {
    priceId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      // operationLogInformation: [], //操作日志请求返回的信息
      // nodeFlowChartList: [],
      formData: {},
      keyTabs: '',
      visibleTransfer: false,
    };
  },
  computed: {
    getFormData() {
      return Object.keys(this.formData).length || 0;
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (!this.priceId) return;
        val && this.getbusinessFormInfo();
      },
      immediate: true,
    },
  },
  created() {
    // console.log(this.$store.state.user.uid);
    // this.getbusinessFormInfo();
  },
  methods: {
    tabsChange(key) {
      this.keyTabs = key;
    },
    async getbusinessFormInfo() {
      const res = await getQueryDetail({ customerId: this.priceId });
      this.formData = res?.data?.data || {};
      // console.log(this.formData, '12we');
    },
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('fresh');
    },
    // 返回
    closeCallback() {
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    // 提交
    async submitCallback() {
      const data = this.$refs.approval?.form || {};
      if (typeof data.approveStatus !== 'boolean') {
        this.$message.error('请先进行审批！');
        return;
      }
      if (data.approveStatus === false && !data.approveOpinion) {
        this.$message.error('请填写审批意见！');
        return;
      }

      const formatData = {
        approveOpinion: data.approveOpinion,
        approveStatus: data.approveStatus,
        customerId: this.formData.id,
        makeCopy: data.makeCopy,
        processId: this.formData.processId,
      };
      await postCustomerCreateApprove({
        ...formatData,
      });

      this.$message.success('提交成功！');
      this.closeCallback();
    },
    // 转他人处理
    retweetCallback() {
      this.visibleTransfer = true;
    },
    // 撤回
    async recallCallback() {
      const res = await postRecallInfo(this.formData.id);
      if (res?.data?.code === 0) {
        this.$message.success('撤回成功');
        this.closeCallback();
        this.$emit('');
      } else {
        this.$message.error('撤回失败');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e6e9;
}
.list-container {
  height: calc(100vh - 110px);
  overflow-y: scroll;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 24px;
  .info-box {
    width: 100%;
    margin-bottom: 15px;
    // padding-bottom: 10px;
    border-bottom: 1px solid #ecedf0;
    .tabs-container {
      height: 500px;
    }
  }
}

/deep/ .poros-drawer-body {
  min-width: 1136px;
  height: 100%;
  padding: 0;
}
.progress-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
